{% extends 'basic/layout/page_basic.html' %}
{% load static %}

<!-- Title -->
{% block title %} 权限管理 {% endblock %}

<!-- CSS -->
{% block css %}  {% endblock %}


<!-- Content -->
{% block content %}
    <!-- 内容01： 面包屑导航 -->
    <span class="layui-breadcrumb">
      <a href="{% url 'main' %}">首页</a>
      <a href="#">用户角色</a>
      <a><b>权限管理</b></a>
    </span>

    <!-- 内容02：树状框展示 -->
    <div style="margin: 30px;">
        <div id="permissionArea" class="demo-tree demo-tree-box" style=" height: 750px;width:500px;
    background-color: whitesmoke; padding: 20px;float:left"></div>
        <div style="float:left; margin: 0 30px;">
            <div class="layui-form-item">
                <button class="layui-btn" id="btnAdd">添加</button>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn" id="btnEdit">修改</button>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn" id="btnDel">删除</button>
            </div>
        </div>
        <div style="float:left;height: 750px;width:800px;padding: 0 20px;">
            <form class="layui-form" id="layerForm" lay-filter="layerForm">
                {% csrf_token %}
                <div class="layui-form-item" style="display: none">
                    <label class="layui-form-label" for="id"><b>编号：</b></label>
                    <div class="layui-input-block">
                        <input type="text" id="id" name="id" class="layui-input" readonly
                               style="background-color: #eaeaea">
                        <span class="error_msg" style="color:red; position: absolute"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" for="title"><b>标题：</b></label>
                    <div class="layui-input-block">
                        <input type="text" id="title" name="title" class="layui-input" readonly
                               style="background-color: #eaeaea">
                        <span class="error_msg" style="color:red; position: absolute"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" for="url"><b>URL：</b></label>
                    <div class="layui-input-block">
                        <input type="text" id="url" name="url" class="layui-input" readonly
                               style="background-color: #eaeaea">
                        <span class="error_msg" style="color:red; position: absolute"></span>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label" for="menu_id"><b>所属菜单：</b></label>
                    <div class="layui-input-block">
                        <select id="menu_id" name="menu_id" lay-search="">
                            <option value="">请选择</option>
                        </select>
                        <span class="error_msg" style="color:red; position: absolute"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" for="order"><b>排序编号：</b></label>
                    <div class="layui-input-block">
                        <input type="text" id="order" name="order" class="layui-input" readonly
                               style="background-color: #eaeaea">
                        <span class="error_msg" style="color:red; position: absolute"></span>
                    </div>
                </div>

                <div class="layui-form-item" style="float:right;margin-top: 40px;">
                    <input type="button" class="layui-btn layui-btn-normal" id="btnCommit" value="提交">
                    <input type="button" class="layui-btn layui-btn-primary" id="btnCancel" value="取消">
                </div>


            </form>

        </div>
    </div>

{% endblock %}


<!-- Title -->
{% block js %}
    <script>
        // 定义一个全局的变量
        let Operation = 0; // 1--添加  2--修改
        $(function () {
            // 初始化页面--初始化下拉框
            initPage();
            // 加载权限的树状结构
            loadTree();
            // 按钮的点击事件
            buttonClick();
        });

        // =============初始化页面 ========================
        function initPage() {
            layui.use(['element', 'form'], function () {
                let element = layui.element;
                let form = layui.form;

                // 获取数据填充到下拉框
                $.ajax({
                    url: "{% url 'list_menu' %}",
                    method: 'post',
                    data: {
                        queryStr: "",
                        csrfmiddlewaretoken: "{{ csrf_token }}",
                    },
                    dataType: 'json',
                    success: function (res) {
                        let container = $('#menu_id');
                        container.html("");
                        $('<option>').attr('value', "").html("请选择").appendTo(container);
                        // 遍历
                        $.each(res.data, (index, value) => {
                            $('<option>').attr('value', value.id).html(value.title).appendTo(container)
                        });

                        form.render();
                    }
                })
            })
        }

        // ==============加载树状权限架构的实现 =============
        function loadTree() {
            // 对后台有一个Ajax把所有的权限数据
            $.ajax({
                url: "{% url 'list_permission' %}",
                method: 'get',
                dataType: 'json',
                success: function (res) {
                    loadTreePermission(res.data);
                }
            })

        }

        //============== 把数据展示在树状的控件中 ===============
        function loadTreePermission(data) {
            layui.use(['tree', 'form'], function () {
                let tree = layui.tree;
                let form = layui.form;

                tree.render({
                    elem: '#permissionArea',
                    showCheckbox: false, // 是否显示复选框
                    data: data,

                    // 树状结构点击事件
                    click: function (obj) {
                        let is_not_child = obj.elem.hasClass('layui-tree-setHide');
                        if (!is_not_child) {
                            // ajax
                            $.ajax({
                                url: "{% url 'permission_get_order' %}",
                                method: "post",
                                data: {
                                    order: obj.data.id,
                                    csrfmiddlewaretoken: "{{ csrf_token }}"
                                },
                                dataType: "json",
                                success: function (res) {
                                    form.val('layerForm', res.data);
                                }
                            })
                        }
                    }
                })
            })
        }

        // ============= 按钮点击事件的具体实现 =================
        function buttonClick() {
            // == 添加 == 
            $('#btnAdd').on('click', function () {
                // 所有的文本输入框
                $('#layerForm').find("input[type='text']").prop('readonly', false).attr('style', 'background-color:white').val("");
                // 让下拉框为空
                $('#menu_id').val("");
                // 修改Operation的值
                Operation = 1;

            });

            // == 修改 ==
            $('#btnEdit').on('click', function () {
                if ($('#title').val().length === 0) {
                    layui.layer.msg("请选择要修改的权限条目！");
                } else {
                    $('#layerForm').find("input[type='text']").prop('readonly', false).attr('style', 'background-color:white');
                    // 修改Operation的值
                    Operation = 2;
                }

            });

            // == 删除 ==
            $('#btnDel').on('click', function () {
                if ($('#title').val().length === 0) {
                    layui.layer.msg("请选择要修改的权限条目！");
                } else {
                    // 删除文本提示
                    let confirmStr = "您确定要删除权限的信息【" + $('#title').val() + "】条目吗？";
                    // 确认
                    layui.layer.confirm(confirmStr, {
                        icon: 3, title: '提示'
                    }, function (index) {
                        // Ajax后台删除
                        $.ajax({
                            url: "{% url 'del_permission' %}",
                            method: 'post',
                            data: {
                                id: $('#id').val(),
                                csrfmiddlewaretoken: "{{ csrf_token }}"
                            },
                            success: function (res) {
                                if (res.status) {
                                    location.reload();
                                } else {
                                    layui.layer.msg(res.error, {
                                        icon: 2,
                                        area: ['400px', '200px'],
                                        time: -1,
                                        btn: ['关闭']
                                    })
                                }
                            }
                        })
                    })
                }
            });

            //== 添加或者修改的提交 ==
            $('#btnCommit').on('click', function () {
                // 清除所有的错误
                $('.error_msg').empty();
                // 判断是否符合表单校验
                if (!checkFormInput()) {
                    return;
                }

                // 定义提交的url
                let CommitURL = "{% url 'add_permission' %}";
                if (Operation === 2) {
                    CommitURL = "{% url 'edit_permission' %}";
                }

                // 提交
                $.ajax({
                    url: CommitURL,
                    method: 'post',
                    data: $('#layerForm').serialize(),
                    dataType: 'json',
                    success: function (res) {
                        if (res.status) {
                            location.reload();
                        } else {
                            layui.layer.msg(res.error, {
                                icon: 2,
                                area: ['400px', '200px'],
                                time: -1,
                                btn: ['关闭']
                            })
                        }
                    }
                })
            });

            // == 取消按钮 ==
            $('#btnCancel').on('click', function () {
                // 文本设置为空并且只读
                $('#layerForm').find("input[type='text']").prop('readonly', true).attr('style', 'background-color:#eaeaea').val("");
                // 让下拉框为空
                $('#menu_id').val("");
                // 清空所有的错误信息
                $('.error_msg').empty();
            })

        }

        // ======================= 表单提交的校验 =============================
        function checkFormInput() {
            // 清除所有的错误
            $('.error_msg').empty();
            // 定义变量记录校验的结果
            let flag = true;

            // 判断标题是否输入
            if ($('#title').val().length === 0) {
                flag = false;
                $('#title').next().html("标题不能为空！");
            }
            // url是否输入
            if ($('#url').val().length === 0) {
                flag = false;
                $('#url').next().html("URL不能为空！");
            }

            // 所属菜单
            if ($('#menu_id').val().length === 0) {
                flag = false;
                $('#menu_id').next().next().html("所属菜单不能为空！");
            }
            // 排序编号
            if ($('#order').val().length === 0) {
                flag = false;
                $('#order').next().html("排序编号不能为空！");
            }

            return flag;
        }
    </script>

{% endblock %}
